
<template>
    <div class="container">
        <el-row :span="24">
            <el-col :span="16">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>最新动态</span>
                    </div>
                    <el-table :data="newtable" :header-cell-style="{background:'#e4ebfd',color:'#76100db'}">
                        <el-table-column align="center" prop="content"  label="内容" ></el-table-column>
                        <el-table-column align="center" prop="action"  label="动作" ></el-table-column>
                        <el-table-column align="center" prop="createUser"  label="操作人" ></el-table-column>
                        <el-table-column align="center" prop="createTime" label="时间"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8" style="padding-left:20px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>项目信息</span>
                    </div>
                    <div class="desc">
                        <p class="descname">项目名称：</p>
                        <p>{{addForm.name}}</p>
                    </div>
                    <div class="desc">
                        <p class="descname">项目编号：</p>
                        <p>{{addForm.code}}</p>
                    </div>
                    <div class="desc">
                        <p class="descname">工期：</p>
                        <p>{{addForm.startTime}} 至 {{addForm.endTime}}</p>
                    </div>
                    <div class="desc">
                        <p class="descname">项目说明：</p>
                        <p>{{addForm.remarks}}</p>
                    </div>
                </el-card>
            </el-col>
            
        </el-row>
        <el-row :span="24" class="mt15">
            <el-col :span="16">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>历史记录</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多记录</el-button>
                    </div>
                    <el-table :data="newtable" :header-cell-style="{background:'#e4ebfd',color:'#76100db'}">
                        <el-table-column align="center" prop="content"  label="内容" ></el-table-column>
                        <el-table-column align="center" prop="action"  label="动作" ></el-table-column>
                        <el-table-column align="center" prop="createUser"  label="操作人" ></el-table-column>
                        <el-table-column align="center" prop="createTime" label="时间"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8" style="padding-left:20px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>相关成员</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <div class="teamvant">
                        <div class="avant-cent" v-for="(item,index) in userList" :key="index">
                            <el-image class="avant" fit="cover" :src="require('@/assets/head.png')" />
                            <div class="name">{{item.name}}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { projectlognew,projectuser,projectdetail } from '@/api/manager.js'
export default {
    data(){
        return{
            newtable:[],
            projectId:this.$route.query.id,
            addForm:{},
            userList:[]
        }
    },
    created(){
        this.getNewlis()
        this.getUsers()
        this.getDetail()
    },
    methods:{
        //获取详情
        getDetail(){
            this.$getFlag().then(obj=>{
                projectdetail({id:this.$route.query.id},obj.data).then(res=>{
                    if(res.status==200){
                        this.addForm = res.data
                    }
                })
            })
        },
        // 最新动态
        getNewlis(){
            let data = {
                page:1,
                num:10,
                projectId:this.projectId
            }
            this.$getFlag().then(obj=>{
                projectlognew(data,obj.data).then(res=>{
                    if(res.status == 200){
                        this.newtable = res.list
                    }
                })
            })
        },
        // 成员
        getUsers(){
            let data = {
                page:1,
                num:10,
                projectId:this.projectId
            }
            this.$getFlag().then(obj=>{
                projectuser(data,obj.data).then(res=>{
                    if(res.status == 200){
                        this.userList = res.list
                    }
                })
            })
        }
    }
}
</script>

<style scoped lang="scss">
.teamvant{
    display: flex;
    flex-wrap: wrap;
}
.avant-cent{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:13px;
    .name{
        color: #666;
        font-size: 14px;
        margin-top:15px
    }
}
.avant{
    width: 80px;
    height: 80px;
    border-radius: 60px;
}
.desc{
    display: flex;
    p{
        color:#999;
        font-size: 14px;
    }
    .descname{
        color:#7d9ae6;
        font-size: 14px;
        width: 80px;
        display: flex;
        justify-content:flex-end
    }
}

</style>